<template>
  <!-- <router-view/> -->
  <!-- <router-view v-if="linkValidate"></router-view> -->
  <div class="app" v-loading="loading">
    <DataCenter v-if="status == 2" :showLogOut="showLogOut"/>
    <Login v-else-if="status == 1" @loginSuccsee="changeStatus"/>
    <Home v-else />
  </div>
</template>

<script>
import DataCenter from './views/dataCenter.vue';
import Login from './views/login.vue';
import Home from './views/home.vue';
import { getScreenInfo } from "@/api/customer";
import store from '@/store';
export default {
  name: 'App',
  components: {
    DataCenter,
    Login,
    Home
  },
  data: () => {
    return {
      status: 0,
      loading: false,
      showLogOut: false
    }
  },
  mounted() {
    this.loading = true;
    this.getInfo();
  },
  methods: {
    getInfo() {
      getScreenInfo({
        url: decodeURIComponent(location.href).replace('/?','?')
        // url: 'http://www.hnorm.com?tid=MTA='
      }).then((res) => {
        if (res.code == 200) {
          const info = res.result;
          if (!this.isInTimeArea(info.access_expired_begin, info.access_expired_end)) {
            this.$message({
              type: 'error',
              message: '访问链接不存在，请确认后访问'
            })
            this.loading = false;
            return;
          } else {
            this.showLogOut = info.is_access == 1 ? true : false;
            //链接有效，判断是否需要登录已经是否已经登录
            if(info.is_access == 1 && store.getters['user/token'] == '') {
              this.status = 1;
            } else {
              this.status = 2;
            }
            this.loading = false;
          }
        } else {
          this.loading = false;
          this.$message({
            type: 'error',
            message: '访问链接不存在，请确认后访问'
          })
        }
      }).catch((e) => {
        console.error(e);
        this.loading = false;
      })
    },
    changeStatus() {
      this.status = 2;
    },
    isInTimeArea(startTime, endTime) {
      // 获取当前时间
      const currentDate = new Date();

      // 设定开始时间和结束时间
      const startDate = new Date(this.parseDateTime('2023-12-27 18:09:17'));
      const endDate = new Date(this.parseDateTime(endTime));

      // 检查当前时间是否在范围内
      if (currentDate >= startDate && currentDate <= endDate) {
        return true;
      } else {
        return false;
      }

    },
    parseDateTime(dateTimeString) {
      const parts = dateTimeString.split(/[- :]/);
      return new Date(parts[0], parts[1] - 1, parts[2], parts[3], parts[4], parts[5]);
    }
  }
}
</script>

<style lang="scss">
/* 定义字体 */
@font-face {
  font-family: 'PingFang SC';
  src: url('https://img.cyeyi.com/databoard/fonts/PingFangSC-Regular-simple.woff2') format('woff2');
  font-display: swap;
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PingFang SC';
  src: url('https://img.cyeyi.com/databoard/fonts/PingFangSC-Medium-simple.woff2') format('woff2');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'PingFang SC';
  src: url('https://img.cyeyi.com/databoard/fonts/PingFangSC-SemiBold-simple.woff2') format('woff2');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: "PingFang SC", sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

.select-item {
  .el-select-dropdown__list {
    // background: rgba(58, 98, 255, 0.12);
    box-shadow: inset 0px 0px 2.2vh 0px rgba(21, 75, 224, 0.32), inset 0px 0px 1vh 0px #517FFF;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #154BE0;
    filter: blur(0px);
    font-size: 1.2vh;
    font-family: PingFang SC;
    font-weight: 400;
    // background-image: linear-gradient(180deg, #517FFF 0%, #91AFFF 100%);
    background: radial-gradient(circle, #091b4f 0%, #091b4f 50%, #154BE0 100%);
    // -webkit-background-clip: text;
    // color: #FFFFFF !important;
  }

  .el-select-dropdown__item {
    color: #FFFFFF;
  }

  .popper__arrow::after {
    border-bottom-color: #0061E8 !important;
  }

  .el-select-dropdown__list .hover {
    background-color: #0061E8 !important;
    color: #FFFFFF;
    filter: blur(0px);
  }

  .el-select-dropdown__list .select {
    background-color: #0061E8 !important;
    color: #FFFFFF;
    filter: blur(0px);
  }

  .el-select-dropdown__empty {
    background: rgba(58, 98, 255, 0.9);
    box-shadow: inset 0px 0px 2.2vh 0px rgba(21, 75, 224, 0.32), inset 0px 0px 1vh 0px #517FFF;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #154BE0;
    filter: blur(0px);
    font-size: 1.2vh;
    font-family: PingFang SC;
    font-weight: 400;
    // background: linear-gradient(180deg, #517FFF 0%, #91AFFF 100%);
    // -webkit-background-clip: text;
    color: #FFFFFF;
    background: radial-gradient(circle, #091b4f 0%, #091b4f 50%, #154BE0 100%);
  }
}
</style>
